import React, { PureComponent } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { get } from 'lodash';

import Button from './Button';
import { widthScale, heightScale } from '../constants';
import { getColors } from '../theme';

export const BUTTON_TYPE = {
  single: 'single',
  double: 'double',
};
export default class DialogAlert extends PureComponent {
  render() {
    const {
      style,
      titleStyle,
      contentStyle,
      buttonsStyle,
      firstBtnStyle,
      secondBtnStyle,
      firstTitleStyle,
      secondTitleStyle,
      onFirstBtnPress,
      onSecondBtnPress,
      type = BUTTON_TYPE.double,
    } = this.props;

    const title = get(this.props, 'title', '请输入标题！');
    const content = get(this.props, 'content', '');
    const firstBtnTitle = get(this.props, 'firstBtnTitle', '取消');
    const secondBtnTitle = get(this.props, 'secondBtnTitle', '确认');

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: getColors().base_oc_18 },
          style,
        ]}
      >
        <Text
          style={[styles.title, { color: getColors().base_fc_5 }, titleStyle]}
        >
          {title}
        </Text>
        {title && this._renderHorizontalSeparator()}
        <Text
          style={[
            styles.content,
            { color: getColors().base_fc_6 },
            contentStyle,
          ]}
        >
          {content}
        </Text>
        <View
          style={[
            styles.buttons,
            buttonsStyle,
            { borderTopColor: getColors().base_lc_1 },
          ]}
        >
          <Button
            style={[styles.btnStyle, firstBtnStyle]}
            titleStyle={[
              styles.btnTitle,
              {
                color:
                  type === BUTTON_TYPE.double
                    ? getColors().base_fc_6
                    : getColors().base_fc_2,
              },
              firstTitleStyle,
            ]}
            title={firstBtnTitle}
            onPress={() => {
              onFirstBtnPress && onFirstBtnPress();
            }}
          />
          {type === BUTTON_TYPE.double && this._renderVerticalSeparator()}
          {type === BUTTON_TYPE.double && (
            <Button
              style={[styles.btnStyle, secondBtnStyle]}
              titleStyle={[
                styles.btnTitle,
                { color: getColors().base_fc_2 },
                secondTitleStyle,
              ]}
              title={secondBtnTitle}
              onPress={() => {
                onSecondBtnPress && onSecondBtnPress();
              }}
            />
          )}
        </View>
      </View>
    );
  }

  _renderHorizontalSeparator() {
    return (
      <View
        style={[
          styles.horizontalSeparator,
          { backgroundColor: getColors().base_lc_1 },
        ]}
      />
    );
  }

  _renderVerticalSeparator() {
    return (
      <View
        style={[
          styles.verticalSeparator,
          { backgroundColor: getColors().base_lc_1 },
        ]}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    width: 270 * widthScale,
    alignItems: 'center',
  },
  title: {
    marginTop: 14 * heightScale,
    fontSize: 16,
    // fontWeight: 'bold',
    color: getColors().base_fc_5,
  },
  content: {
    marginTop: 16 * heightScale,
    marginHorizontal: 24 * widthScale,
    fontSize: 14,
    lineHeight: 22,
  },
  horizontalSeparator: {
    width: 270 * widthScale,
    height: 1,
    marginTop: 14 * heightScale,
  },
  verticalSeparator: {
    height: 43 * heightScale,
    width: 1,
  },
  buttons: {
    height: 44 * heightScale,
    flexDirection: 'row',
    borderColor: 'transparent',
    marginTop: 14 * heightScale,
    borderWidth: 1,
  },
  btnStyle: {
    flex: 1,
  },
  btnTitle: {
    fontSize: 16,
  },
});
